<!-- 发布问诊 -->
<template>
	<view>
		<uni-nav-bar title="发布问诊" backgroundColor="#fff" color="#000" statusBar="true" @clickLeft="back()"
			left-icon="arrowleft"></uni-nav-bar>
		
		<scroll-view class="select-facility-view" scroll-y="true"
			:style="{height:setcollapseheight() + 'px'}">
			<u--form labelPosition="left" :model="model" :rules="rules" ref="form">
				<!-- 1.分类 -->
				<u-form-item label="帖子分类" prop="formData.invitationTypeId">
					<view class="left-image">
						<image class="left-img" src="@/static/socialized-service/specialist-consultation/user-module/post-inquiry/classify.png" mode="heightFix"></image>
					</view>
					<picker :range="tabList" @change="selectTab" range-key="name">
						<span style="font-size: 30rpx;" :style="{color:(tabType === '选择帖子分类' ? 'rgb(192, 196, 204)':'#000')}">{{tabType}}</span>
					</picker>
				</u-form-item>
				<!-- 2.帖子标题 -->
				<u-form-item label="帖子标题" prop="formData.invitationTitle">
					<view class="left-image">
						<image class="left-img" src="@/static/socialized-service/specialist-consultation/user-module/post-inquiry/title.png" mode="heightFix"></image>
					</view>
					<!-- <input type="text" v-model="model.formData.invitationTitle"
						placeholder="请输入帖子标题" /> -->
					<u--input v-model="model.formData.invitationTitle" placeholder='请输入帖子标题' border="none"></u--input>
				</u-form-item>
				<!-- 3.内容 -->
				<u-form-item class="textContent" prop="formData.invitationContent" style="width: 100%;">
					<view class="left-image">
						<image class="left-img" src="@/static/socialized-service/specialist-consultation/user-module/post-inquiry/content.png" mode="heightFix"></image>
					</view>
					<view class="content">
						<textarea v-model="model.formData.invitationContent" placeholder="请输入内容"></textarea>
					</view>
				</u-form-item>
				<!-- 4.上传图片 -->
				<u-form-item  label="上传图片">
					<view class="left-image">
						<image class="left-img" src="@/subPage1/static/machinery/tuwenxiangqing.png" style="height: 26rpx;" mode="heightFix"></image>
					</view>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						deletable :maxCount="3">点击上传</u-upload>
				</u-form-item>
				<u-form-item  label="上传视频">
					<view class="left-image">
						<image class="left-img" src="@/subPage1/static/machinery/tuwenxiangqing.png" style="height: 26rpx;" mode="heightFix"></image>
					</view>
					<u-upload :fileList="fileList2" @afterRead="afterVideoRead" @delete="deleteVed" name="2" multiple :maxCount="1"
						accept="video">点击上传</u-upload>
				</u-form-item>
			</u--form>
		</scroll-view>
		<view class="publish">
			<u-button text="发布" color="#0480FB" shape="circle" @click="publish"
				style="background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);"></u-button>
		</view>
	</view>

</template>

<script>
	import {
		baseurl,
		cloudBaseurl,
		agrServiceUrl
	} from '@/config/baseUrl.js'

	import navBar from '../../../components/nav-bar/index.vue'
	import postApi from '@/api/socialized-servce/specialist-consultation/user-module/consultation-list/index.js'
	export default {
		name: 'invitation-details',
		components: {
			navBar
		},
		data() {
			return {
				// 帖子分类
				tabList: [],
				tabType: '选择帖子分类',
				fileList: [],
				pictureIdList: [],
				fileList2: [],
				model: {
					formData: {
						invitationTypeId: null,
						invitationTitle: '',
						invitationContent: '',
						imgList: [],
						vedioList: [],
						serviceProviderNo: uni.getStorageSync('serviceProviderNo')
					},
				},
				rules: {
					'formData.invitationTypeId': {
						type: 'number',
						required: true,
						message: '贴子分类不能为空',
						trigger: ['blur', 'change']
					},
					'formData.invitationTitle': {
						type: 'string',
						required: true,
						message: '帖子标题不能为空',
						trigger: ['blur', 'change']
					},
					'formData.invitationContent': {
						type: 'string',
						required: true,
						message: '内容不能为空',
						trigger: ['blur', 'change']
					},
				},
				type: '',
				duration: 0, //视频时长
			}
		},
		onLoad() {

		},
		onShow() {
			this.getPostClassification()
		},
		methods: {
			back() {
				uni.redirectTo({
					url: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list'
				})
			},
			// 获取帖子分类
			async getPostClassification() {
				let params = {
					name: '',
					serviceProviderNo: uni.getStorageSync('serviceProviderNo')
				}
				let res = await postApi.queryPostVariety(params)
				if (res.code == 200) {
					this.tabList = res.data
				} else {
					return Promise.reject(new Error('faile'))
				}

			},
			// 选择分类
			selectTab(e) {
				this.tabType = this.tabList[e.detail.value].name
				this.model.formData.invitationTypeId = this.tabList[e.detail.value].invitationTypeId
				this.$refs.form.validateField('formData.invitationTypeId')
			},
			//  设置可选择设施高度
			setcollapseheight() {
				let winHeight = 0
				let topheightone = uni.upx2px(136)
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				})
				let oldHeight = uni.upx2px(136)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef H5
				winHeight = winHeight - 10
				// #endif
				return winHeight
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.model.formData.imgList.splice(event.index, 1)
			},
			deleteVed(event) {
				this.fileList2.splice(event.index, 1)
				this.model.formData.vedioList.splice(event.index, 1)
			},
			// 添加图片
			async afterRead(event) {
				this.type = 'image'
				console.log(event);
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				this.isshowFile = false
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.afterfileList = this.fileList

			},
			// 上传视频
			async afterVideoRead(event) {
				this.type = 'video'
				this.duration = event.file[0].duration

				console.log(event.file[0].duration, '视频');
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList2.length
				this.isshowFile = false
				lists.map((item) => {
					this.fileList2.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList2[fileListLen]
					this.fileList2.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
				this.afterfileList = this.fileList2
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: agrServiceUrl + `common/file/upDown/getUploadUrl?moduleType=XG_ORGANIZATION&upDownType=FTP`,
						filePath: url,
						name: 'file',
						header: {
							// "moduleType": 'EXPERT',
							'token': uni.getStorageSync("satoken") || ''
						},
						formData: {},
						success: async (res) => {
							const dataObj = JSON.parse(res.data);
							const data = dataObj.data;
							console.log(data, 'ww');
							resolve(data);
							if (this.type == 'image') {
								this.model.formData.imgList.push({
									invitationImgUrl: `${agrServiceUrl}` + data.slice(1)
								})
							} else {
								this.model.formData.vedioList.push({
									invitationVedioUrl: `${agrServiceUrl}` + data.slice(1),
									vedioImgUrl: '',
									duration: this.duration
								})
							}
							if (this.pictureIdList.includes(data)) return
							else {
								setTimeout(() => {
									this.pictureIdList.push(data)
								}, 1000)

							}
						},
						fail: () => {
							uni.showToast({
								title: '图片上传失败',
								icon: 'none'
							})
						}
					});
				})
			},
			// 发布帖子
			publish() {
				this.$refs.form.validate().then(async () => {
					// console.log(this.model.formData);return
					let res = await postApi.publishPost(this.model.formData)
					if (res.code == 200) {
						uni.redirectTo({
							url: '/subPage1/socialized-service/specialist-consultation/user-module/consultation-list/consultation-list'
						})
					}
				}).catch(errors => {
					console.log("失败信息:" + JSON.stringify(errors))
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-form {
		padding: 0 32rpx;
		.u-form-item {
			position: relative;
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 20rpx;
			&:nth-child(n+4) {
				background-color: #E2E7F8;
			}
		}
		
		.content {
			margin-top: 20rpx;
		}
		// 左侧img
		.left-image {
			position: absolute;
			left: 0;
			width: 56rpx;
			height: 54rpx;
			border-radius: 50%;
			margin-left: 22rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			
			.left-img {
				width: 56rpx;
				height: 54rpx;
			}
		}
		
		.u-form-item__body__left {
			width: 200rpx !important;
			margin-left: 50px;
			
			.u-form-item__body__left__content__label {
				font-size: 32rpx!important;
			}
		}
		
		// 右侧icon
		.u-icon--right {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
		}
		// 上传图片
		.u-upload__deletable__icon {//删除icon
			top: 12rpx;
			right: 2rpx;
			transform: scale(1.7);
		}
		
		.uploadBtns {//身份证
			display: flex;
		}
		.u-upload__wrap {
			display: flex!important;
			align-items: center;
		}
		.u-upload__wrap__preview__other {
			height: 80rpx !important;
			width: 80rpx !important;
		}
		
		.textContent {
			
			.u-form-item__body {
				padding: 0;
				
				.u-form-item__body__right__content__slot {
					width: 100%!important;
					.content {
						width: 100%;
						padding-left: 90rpx;
					}
				}
				
				.uni-textarea-placeholder {
					font-size: 30rpx;
					color: rgb(192, 196, 204);
				}
			}
		}
	}
	
	.publish {
		position: fixed;
		bottom: 218rpx;
		width: 340rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}
	
	/deep/ .uni-scroll-view {
		position: relative;
		.uni-scroll-view-content {
			position: absolute;
			top: 0;
		}
	}
</style>